<template>
    <view class="container">
        <!-- 搜索框 -->
        <view class="index-search-box">
            <navigator class="index-search" hover-class="none" openType="navigate" url="../search/index">
                <view class="index-cont-search t-c">
                    <icon class="text-center" :color="searchColor" :size="searchSize" type="search"></icon>
                    <text>{{ searchName }}</text>
                </view>
            </navigator>
        </view>

        <!-- 分类样式：一级分类(大图) 10 -->
        <view class="cate-content" v-if="templet.category_style === 10 && list.length > 0">
            <view class="cate-wrapper cate_style__10">
                <scroll-view :scroll-y="true" :style="'height: ' + (scrollHeight - 10) + 'px; '">
                    <view class="cate-item" v-for="(item, index) in list" :key="index">
                        <navigator hover-class="none" :url="'../category/list?id=' + item.id">
                            <image mode="widthFix" :src="item.images.file_path"></image>
                        </navigator>
                    </view>
                </scroll-view>
            </view>
        </view>

        <!-- 分类样式：一级分类(小图) 11 -->
        <view class="cate-content" v-else-if="templet.category_style === 11 && list.length > 0">
            <view class="cate-wrapper cate_style__11">
                <scroll-view class="clear" :scroll-y="true" :style="'height: ' + (scrollHeight - 10) + 'px; '">
                    <view class="cate-item" v-for="(item, index) in list" :key="index">
                        <navigator hover-class="none" :url="'../category/list?id=' + item.id">
                            <image mode="widthFix" :src="item.images.file_path"></image>
                            <text class="f-26">{{ item.name }}</text>
                        </navigator>
                    </view>
                </scroll-view>
            </view>
        </view>

        <!-- 分类样式：二级分类 20 -->
        <view class="cate-content dis-flex" v-else-if="templet.category_style === 20 && list.length > 0">
            <!-- 左侧 一级分类 -->
            <scroll-view class="cate-left f-28" :scroll-y="true" :style="'height: ' + scrollHeight + 'px; '">
                <text
                    @tap="selectNav"
                    :class="'type-nav ' + (curNav == item.id ? 'selected' : '')"
                    :data-id="item.id"
                    :data-index="index"
                    v-if="item.pid == 0"
                    v-for="(item, index) in list"
                    :key="index"
                >
                    {{ item.name }}
                </text>
            </scroll-view>

            <!-- 右侧 二级分类 -->
            <scroll-view class="cate-right b-f" :scroll-top="scrollTop" :scroll-y="true" :style="'height: ' + scrollHeight + 'px; '">
                <view v-if="list[curIndex]">
                    <view class="cate-right-cont">
                        <view class="cate-two-box">
                            <view class="cate-cont-box">
                                <view class="flex-two" v-if="twoitem.pid == curNav" v-for="(twoitem, index) in list" :key="index">
                                    <navigator hover-class="none" :url="'../category/list?category_id=' + twoitem.id">
                                        <view class="cate-img" :id="twoitem.file_id">
                                            <image :src="twoitem.images.file_path"></image>
                                        </view>
                                        <text>{{ twoitem.name }}</text>
                                    </navigator>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>

        <!-- 分类样式：三级分类 30 -->
        <view class="cate-content dis-flex" v-else-if="templet.category_style == 30 && list.length > 0">
            <!-- 左侧 一级分类 -->
            <scroll-view class="cate-left f-28" :scroll-y="true" :style="'height: ' + scrollHeight + 'px; '">
                <text
                    @tap="selectNav"
                    :class="'type-nav ' + (curNav == item.id ? 'selected' : '')"
                    :data-id="item.id"
                    :data-index="item.pid"
                    v-if="item.pid == 0"
                    v-for="(item, index) in list"
                    :key="index"
                >
                    {{ item.name }}
                </text>
            </scroll-view>

            <!-- 右侧 二级分类 -->
            <scroll-view class="cate-right b-f" :scroll-top="scrollTop" :scroll-y="true" :style="'height: ' + scrollHeight + 'px; '">
                <view v-if="list[curIndex]">
                    <view class="cate-right-cont">
                        <view class="cate-two-box">
                            <view class="cate-cont-box">
                                <view class="flex-two" v-if="twoitem.pid == curNav" v-for="(twoitem, index) in list" :key="index">
                                    <navigator class="cate-nav" hover-class="none" :url="'../category/list?category_id=' + twoitem.id">
                                        <!-- <image src="{{twoitem.images.file_path}}"></image> -->
                                        <text style="font-size: 16px">{{ twoitem.name }}</text>
                                    </navigator>

                                    <view class="flex-three" v-if="items.pid == twoitem.id" v-for="(items, index1) in list" :key="index1">
                                        <navigator hover-class="none" :url="'../category/list?category_id=' + items.id">
                                            <view class="cate-img" :id="items.file_id">
                                                <image :src="items.images.file_path"></image>
                                            </view>
                                            <text>{{ items.name }}</text>
                                        </navigator>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>

        <view v-if="!list.length && notcont">
            <view class="yoshop-notcont">
                <text class="iconfont icon-wushuju"></text>
                <text class="cont">亲，暂无商品分类哦</text>
            </view>
        </view>
    </view>
</template>

<script>
const app = getApp();
export default {
    data() {
        return {
            // 搜索框样式
            searchColor: 'rgba(0,0,0,0.4)',

            searchSize: '15',
            searchName: '搜索商品',

            // 列表高度
            scrollHeight: 0,

            // 一级分类：指针
            curNav: true,

            curIndex: 0,

            // 分类列表
            list: [],

            // show
            notcont: false,

            templet: {
                category_style: 0
            },

            scrollTop: 0,

            twoitem: {
                pid: '',
                id: '',
                file_id: '',

                images: {
                    file_path: ''
                },

                name: ''
            }
        };
    },
    onLoad: function () {
        let that = this;
        // 设置分类列表高度
        that.setListHeight();
        // 获取分类列表
        this.getCategoryList();
    },
    onShow: function () {
        let that = this;
        // 设置分类列表高度
        that.setListHeight();
        // 获取分类列表
        this.getCategoryList();
    },
    /**
     * 设置分享内容
     */
    onShareAppMessage: function () {
        let templet = this.templet;
        return {
            title: templet.share_title,
            path: '/pages/category/index?referee_id=' + app.globalData.getUserId()
        };
    },
    methods: {
        /**
         * 设置分类列表高度
         */
        setListHeight: function () {
            let that = this;
            uni.getSystemInfo({
                success: function (res) {
                    that.setData({
                        scrollHeight: res.windowHeight - 47
                    });
                }
            });
        },

        /**
         * 获取分类列表
         */
        getCategoryList: function () {
            let that = this;
            app.globalData._get('category/index', {}, function (result) {
                let data = result.data;
                that.setData({
                    list: data.list,
                    templet: data.templet,
                    curNav: data.list.length > 0 ? data.list[0].id : true,
                    notcont: !data.list.length
                });
            });
        },

        /**
         * 一级分类：选中分类
         */
        selectNav: function (t) {
            let curNav = t.target.dataset.id;
            let curIndex = parseInt(t.target.dataset.index);
            this.setData({
                curNav,
                curIndex,
                scrollTop: 0
            });
        }
    }
};
</script>
<style>
@import './index.css';
</style>
